<template>
  <div class="container">
    <div class="topCon">
      <el-row>
        <el-col class="topTitle">
          <h2>
            <i class="icon iconfont iconfanhui1" @click="goBackOne"></i>
            {{
              caseInfo.complaintPerName
                ? caseInfo.complaintPerName + '的欠薪诉求'
                : '欠薪诉求详情'
            }}
            <span class="reRecord" v-if="caseInfo.isRepeat == 1">重复诉求</span>
            <span
              class="during"
              v-if="caseInfo.isRepeat === '0' && caseInfo.status == 3"
              >待进一步办理</span
            >
            <span
              class="during"
              v-if="
                caseInfo.isRepeat === '0' &&
                caseInfo.status == 2 &&
                caseInfo.caseType != 'INVALID'
              "
              >办理中</span
            >
            <span
              class="finished"
              v-if="caseInfo.isRepeat === '0' && caseInfo.status == 1"
              >已办结</span
            >
            <span
              class="reRecord"
              v-if="
                caseInfo.isRepeat === '0' &&
                caseInfo.status == 2 &&
                caseInfo.caseType == 'INVALID'
              "
              >无效件</span
            ><span
              style="color: #666; font-size: 14px"
              v-if="caseInfo.caseType == 'INVALID'"
              >无效件无需进行办理</span
            >
            <span v-if="caseInfo.isRepeat == 1" class="reRecordTip"
              >标记为重复诉求后，此条欠薪诉求无需进行处理，仅需在同诉求事件首条欠薪诉求中处理。</span
            >
          </h2>
          <ul class="topTitleInfo">
            <li>编号：{{ caseInfo.numId || '- -' }} <i></i></li>
            <li>收件时间：{{ caseInfo.createTime }}<i></i></li>
            <li>渠道来源：{{ caseInfo.complaintSource || '- -' }} <i></i></li>
            <li>案件类型：{{ caseInfo.caseTypeValue || '- -' }}</li>
          </ul>
        </el-col>
      </el-row>
    </div>

    <div class="mainCon">
      <el-row class="infoContent">
        <el-col :span="9" class="info infoLeft">
          <p class="title">欠薪诉求信息</p>
          <!-- <div class="infoTopTip">
            <i
              class="el-icon-warning"
              style="font-size: 24px; color: orange"
            ></i>
            信息缺失将导致系统无法自动统计报表，请补全信息
          </div> -->
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">诉求类型</div>
            <div v-if="caseInfo.caseType != 'INVALID'">
              <el-link
                v-if="!editType"
                icon="el-icon-edit"
                class="edit"
                type="primary"
                @click="toEditType"
                >编辑</el-link
              >
            </div>
          </div>
          <ul class="infoList" v-if="!editType">
            <li class="infoListItem">
              是否重复诉求：{{ caseInfo.isRepeat == 1 ? '是' : '否' }}
            </li>
            <li class="infoListItem" v-if="caseInfo.isRepeat == 1">
              同诉求事件首条欠薪诉求：{{ caseInfo.fristNumId }}
            </li>
          </ul>
          <case-type
            v-if="editType"
            :childData="caseInfo"
            @callback="callbackCaseType"
          ></case-type>
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">被投诉单位</div>
            <div v-if="caseInfo.caseType != 'INVALID'">
              <el-link
                icon="el-icon-edit"
                v-if="caseInfo.isRepeat === '0' && !editDepartment"
                class="edit"
                type="primary"
                @click="toEditDepartment"
                >编辑</el-link
              >
            </div>
          </div>
          <ul class="infoList" v-if="!editDepartment">
            <li class="infoListItem">
              单位名称：{{ caseInfo.complaintCompanyName || '- -' }}
            </li>
            <li class="infoListItem">
              是否工程项目：{{
                caseInfo.isComplaintProject === '1'
                  ? '是'
                  : caseInfo.isComplaintProject === '0'
                  ? '否'
                  : '- -'
              }}
              - {{ caseInfo.complaintProjectName || '--' }}
            </li>
            <li class="infoListItem">
              单位性质：<span
                class="infoListItemInfo"
                v-if="caseInfo.companyType"
                >{{ caseInfo.companyType }}</span
              >
              <span v-else class="infoListItemNull">-(信息缺失)</span>
            </li>
            <li class="infoListItem" v-if="caseInfo.isComplaintProject === '1'">
              项目性质：<span
                class="infoListItemInfo"
                v-if="caseInfo.projectType"
                >{{ caseInfo.projectType }}</span
              >
              <span v-else class="infoListItemNull">-(信息缺失)</span>
            </li>
            <li class="infoListItem" v-else>
              项目性质：<span class="infoListItemInfo">- -</span>
            </li>

            <li class="infoListItem">
              行业类型：<span
                class="infoListItemInfo"
                v-if="caseInfo.industry"
                >{{ caseInfo.industry }}</span
              >
              <span v-else class="infoListItemNull">-(信息缺失)</span>
            </li>
            <li class="infoListItem">
              单位电话：<span
                class="infoListItemInfo"
                v-if="caseInfo.companyTel"
                >{{ caseInfo.companyTel }}</span
              >
              <span v-else class="infoListItemNull">-(信息缺失)</span>
            </li>
            <li class="infoListItem">
              单位地址：<span
                class="infoListItemInfo"
                v-if="caseInfo.companyAddress"
                >{{ caseInfo.companyAddress }}</span
              >
              <span v-else class="infoListItemNull">-(信息缺失)</span>
            </li>
          </ul>
          <case-department
            @callback="callbackDepartment"
            v-if="editDepartment"
            :childData="caseInfo"
          />
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">投诉人信息</div>
            <div v-if="caseInfo.caseType != 'INVALID'">
              <el-link
                icon="el-icon-edit"
                class="edit"
                type="primary"
                v-if="caseInfo.isRepeat === '0' && !editPerson"
                @click="toEditPerson"
                >编辑</el-link
              >
            </div>
          </div>
          <ul class="infoList" v-if="!editPerson">
            <li class="infoListItem">
              投诉人姓名：<span
                class="infoListItemInfo"
                v-if="caseInfo.complaintPerName"
                >{{ caseInfo.complaintPerName }}</span
              >
              <span v-else class="infoListItemNull">- (信息缺失)</span>
            </li>
            <li class="infoListItem">
              联系电话：<span
                class="infoListItemInfo"
                v-if="caseInfo.complaintPerTel"
                >{{ caseInfo.complaintPerTel }}</span
              >
              <span v-if="caseInfo.repeatNum"
                >(共投诉{{ caseInfo.repeatNum }}次)</span
              >
            </li>
            <li class="infoListItem">
              身份证号：<span
                class="infoListItemInfo"
                v-if="caseInfo.complaintPerIdcard"
                >{{ caseInfo.complaintPerIdcard }}</span
              ><span v-else class="infoListItemNull">- (信息缺失)</span>
            </li>
            <li class="infoListItem">
              联系地址：<span
                class="infoListItemInfo"
                v-if="caseInfo.complaintPerAddress"
                >{{ caseInfo.complaintPerAddress }}</span
              ><span v-else class="infoListItemNull">- (信息缺失)</span>
            </li>
          </ul>
          <case-person
            v-if="editPerson"
            @callback="callbackCasePerson"
            :childData="caseInfo"
          />
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">欠薪诉求</div>
          </div>
          <ul class="infoList">
            <li class="infoListItem">
              <p>
                {{ caseInfo.complaintContent || '- -' }}
              </p>
            </li>
          </ul>
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">其他</div>
          </div>
          <ul class="infoList">
            <li class="infoListItem">
              反馈部门名称：{{ caseInfo.department || '- -' }}
            </li>
            <li class="infoListItem">
              规定完成时间：{{ caseInfo.complaintEndDate || '- -' }}
            </li>
          </ul>
        </el-col>
        <el-col :span="15" class="info infoRight">
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">任务分发</div>
          </div>
          <el-row class="infoList">
            <el-col :span="12" class="infoListItem">
              负责地区：{{
                areaId == ''
                  ? '- -'
                  : `${caseInfo.cityName ? caseInfo.cityName : ''}${
                      caseInfo.countyName &&
                      caseInfo.countyName != caseInfo.cityName
                        ? '-' + caseInfo.countyName
                        : ''
                    }${caseInfo.streetName ? '-' + caseInfo.streetName : ''}`
              }}
              <span v-if="caseInfo.caseType != 'INVALID'">
                <el-link
                  type="primary"
                  @click="openTaskDialog"
                  v-if="caseInfo.isRepeat === '0'"
                  >更换地区</el-link
                >
              </span>
            </el-col>
            <el-col :span="12" class="infoListItem">
              办理负责人：{{
                (caseInfo.complaintManagerNames &&
                  caseInfo.complaintManagerNames.join('、')) ||
                '- -'
              }}
              <span v-if="caseInfo.caseType != 'INVALID'">
                <el-link
                  type="primary"
                  @click="openPersonDialog"
                  v-if="caseInfo.isRepeat === '0'"
                  >更换负责人</el-link
                >
              </span>
            </el-col>
          </el-row>
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">查实情况</div>
            <div v-if="caseInfo.caseType != 'INVALID'">
              <el-link
                icon="el-icon-edit"
                class="edit"
                type="primary"
                v-if="caseInfo.isRepeat === '0' && !editDate"
                @click="toEditDate"
                >编辑</el-link
              >
            </div>
          </div>
          <el-row class="infoList" v-if="!editDate">
            <el-col :span="12" class="infoListItem infoListItemRequired">
              查实结果：{{
                caseInfo.isTrue === '0'
                  ? '非欠薪问题'
                  : caseInfo.isTrue == 1
                  ? '欠薪问题'
                  : ' - -'
              }}
            </el-col>
            <el-col :span="12" class="infoListItem">
              回复专线日期：{{ caseInfo.revertDate || '- -' }}
            </el-col>
            <el-col :span="24" class="infoListItem infoListItemRequired">
              备注：<span>{{ caseInfo.checkRemark || '- -' }}</span>
            </el-col>
          </el-row>
          <case-truth
            v-if="editDate"
            :childData="caseInfo"
            @callback="callbackCaseDate"
          />
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">解决情况</div>
            <div v-if="caseInfo.caseType != 'INVALID'">
              <el-link
                icon="el-icon-edit"
                class="edit"
                type="primary"
                v-if="caseInfo.isRepeat === '0' && !editResolve"
                @click="toEditResolve"
                >编辑</el-link
              >
            </div>
          </div>
          <el-row class="infoList" v-if="!editResolve">
            <el-col :span="12" class="infoListItem infoListItemRequired">
              是否解决：{{ resolveStatus }}
            </el-col>
            <el-col :span="12" class="infoListItem">
              解决方式：{{ resolveType }}
            </el-col>
            <el-col :span="12" class="infoListItem infoListItemRequired">
              涉及人数：{{ caseInfo.peopleCount || '- -' }}
            </el-col>
            <el-col :span="12" class="infoListItem infoListItemRequired">
              涉及金额：{{ caseInfo.moneyTotal || '- -' }}
            </el-col>
            <el-col :span="12" class="infoListItem infoListItemRequired">
              办结日期：{{ caseInfo.overDate || '- -' }}
            </el-col>
          </el-row>
          <case-resolve
            @callback="callbackCaseResolve"
            :childData="caseInfo"
            v-if="editResolve"
          />
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">办理进展记录</div>
          </div>
          <div class="infoList">
            <div class="infoListTitles">
              填写办理进展，包括联系投诉人、上门核查、调查、组织协调等。
            </div>
            <el-input
              class="infoListInput"
              :rows="4"
              type="textarea"
              :disabled="
                caseInfo.isRepeat === '1' || caseInfo.caseType == 'INVALID'
              "
              placeholder="请填写办理进展"
              v-model="progressContent"
            ></el-input>
            <el-button
              :type="
                caseInfo.isRepeat === '1' || caseInfo.caseType == 'INVALID'
                  ? 'info'
                  : 'primary'
              "
              :class="
                caseInfo.isRepeat === '1' || caseInfo.caseType == 'INVALID'
                  ? 'dosabledBtn'
                  : 'saveBtn commomBtn'
              "
              :disabled="
                caseInfo.isRepeat === '1' || caseInfo.caseType == 'INVALID'
              "
              :loading="isLoading"
              @click="addAppealProgress"
              >添加进展</el-button
            >
          </div>
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">办理进展</div>
          </div>
          <div class="infoList">
            <div>
              <el-steps
                direction="vertical"
                v-if="appealProgressList.length > 0"
              >
                <el-step
                  v-for="item in appealProgressList"
                  :key="item.id"
                  :title="`操作时间：${item.createTime}  操作人：${item.creatorName}`"
                  :description="item.progressContent"
                ></el-step>
              </el-steps>
              <span v-else class="noDataTip">暂无进展记录</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 地区任务分发弹窗 -->
      <dialog-area
        :showTaskProp="showTask"
        @callback="handleCloseArea"
        :childData="caseInfo"
      />
      <!-- 指定责任人弹窗 -->
      <dialog-person
        :showTaskProp="showPerson"
        @callback="handleClosePerson"
        :childData="caseInfo"
      />
    </div>
  </div>
</template>
<script>
import caseType from './caseTypeComp'
import caseDepartment from './caseDepartment'
import CasePerson from './casePerson.vue'
import CaseTruth from './caseTruth.vue'
import CaseResolve from './caseResolve.vue'
import dialogArea from './dialogArea.vue'
import DialogPerson from './dialogPerson.vue'
export default {
  name: 'caseDetail',
  components: {
    caseType,
    caseDepartment,
    CasePerson,
    CaseTruth,
    CaseResolve,
    dialogArea,
    DialogPerson,
  },
  data() {
    return {
      id: '',
      type: '',
      caseInfo: {},
      isLoading: false,
      editType: false,
      editDepartment: false,
      editPerson: false,
      editDate: false,
      editResolve: false,
      showTask: false,
      showPerson: false,
      progressContent: '',
      appealProgressList: [],
      flag: '1',
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.type = this.$route.query.type
    this.getCaseDetail(this.id)
    this.getAppealProgressList(this.id)
  },
  computed: {
    resolveStatus() {
      if (this.caseInfo.status == 1) {
        return '已办结'
      } else if (this.caseInfo.status == 2) {
        return '办理中'
      } else if (this.caseInfo.status == 3) {
        return '待进一步办理'
      }
      return '- -'
    },
    resolveType() {
      if (this.caseInfo.solution == 1) {
        return '用人单位已支付'
      } else if (this.caseInfo.solution == 2) {
        return '已劳动仲裁'
      } else if (this.caseInfo.solution == 3) {
        return '人民法院诉讼'
      } else if (this.caseInfo.solution == 4) {
        return '其他'
      }
      return '- -'
    },
  },
  methods: {
    /**
     * @name: 获取欠薪投诉详情
     * @param {string} id
     * @Author: 471826078@qq.com
     */
    getCaseDetail(rightsAppealId) {
      this.axios
        .get('api-r/rbp/rightsAppealDetail', { params: { rightsAppealId } })
        .then((res) => {
          console.log(res)
          if (!res.data.hasError) {
            this.caseInfo = res.data.result
          } else {
            this.$message({
              type: 'warning',
              message: res.data.errorMsg,
            })
          }
        })
    },
    goBackOne() {
      let url
      if (this.type && this.type == 'area') {
        url = '/home/specialAccount/jurisdictionsPayDemands'
      } else if (this.type && this.type == 'myResponsible') {
        url = '/home/specialAccount/myResponsible'
      } else {
        url = '/home/specialAccount/backPayDemands'
      }
      this.$router.push(url)
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: url,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @name: 编辑诉求类型
     * @param {*}
     * @Author: 471826078@qq.com
     */
    toEditType() {
      this.editType = true
    },
    callbackCaseType(val) {
      this.editType = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**编辑投诉单位
     * @name:
     * @param {*}
     * @Author: 471826078@qq.com
     */
    toEditDepartment() {
      this.editDepartment = true
    },
    callbackDepartment(val) {
      this.editDepartment = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name:
     * @param {*}
     * @Author: 471826078@qq.com
     */
    toEditPerson() {
      this.editPerson = true
    },
    callbackCasePerson(val) {
      this.editPerson = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name:
     * @param {*}
     * @Author: 471826078@qq.com
     */
    toEditDate() {
      this.editDate = true
    },
    callbackCaseDate(val) {
      this.editDate = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name:
     * @param {*}
     * @Author: 471826078@qq.com
     */
    toEditResolve() {
      this.editResolve = true
    },
    callbackCaseResolve(val) {
      this.editResolve = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name: 地区任务分发相关
     * @param {*}
     * @Author: 471826078@qq.com
     */
    openTaskDialog() {
      this.showTask = true
    },
    handleCloseArea(val) {
      this.showTask = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name: 指定责任人相关方法
     * @param {*}
     * @Author: 471826078@qq.com
     */
    openPersonDialog() {
      this.showPerson = true
    },
    handleClosePerson(val) {
      this.showPerson = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name: 添加办理进展记录 BY WangLinFenf
     * @param {string} rightsId
     * @param {string} progressContent  欠薪诉求处理进展信息
     * @Author: 471826078@qq.com
     */
    addAppealProgress() {
      const { id, progressContent } = this
      if (progressContent.length == 0) {
        this.$message({
          type: 'warning',
          message: '请输入办理进展详情',
        })
        return false
      }
      this.isLoading = true
      this.axios
        .post('api-r/rbp/appealprogress/add', { rightsId: id, progressContent })
        .then((res) => {
          if (!res.data.hasError) {
            this.$message({
              type: 'success',
              message: '添加成功',
            })
            this.progressContent = ''
            this.getAppealProgressList(id)
            this.isLoading = false
          } else {
            this.$message({
              type: 'warning',
              message: res.data.errorMsg,
            })
            this.isLoading = false
          }
        })
    },
    /**
     * @name: 查询办理进展列表接口 BY WangLinFenf
     * @param {*}
     * @Author: 471826078@qq.com
     */
    getAppealProgressList(id) {
      this.axios
        .post('api-r/rbp/appealprogress/list', { rightsId: id })
        .then((res) => {
          if (!res.data.hasError) {
            this.appealProgressList = res.data.result
          } else {
            this.$message({
              type: 'warning',
              message: res.data.errorMsg,
            })
          }
        })
    },
  },
}
</script>
<style lang="less" scoped>
.el-row {
  padding: 0 24px;
}
.topTitle {
  background: #fff;
  height: 90px;
  padding: 15px 0px;
  position: relative;
  border-bottom: 1px solid #eee;
  h2 {
    vertical-align: middle;
    font: bold 18px Microsoft YaHei;
    color: #333333;
    .iconfanhui1 {
      font-size: 20px;
      margin-right: 6px;
      cursor: pointer;
    }
    span {
      font-weight: normal;
      display: inline-block;
      padding: 0 6px;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      margin-left: 12px;
    }
    .during {
      background: #ffac37;
    }
    .finished {
      background: #009588;
    }
    .reRecord {
      background: #647382;
    }
    .reRecordTip {
      font-size: 14px;
      color: #666666;
      width: auto;
    }
  }
  &Info {
    line-height: 14px;
    font-size: 14px;
    margin-top: 10px;
    color: #666666;
    li {
      display: inline-block;
      // margin-right: 30px;
      position: relative;
      // padding-left: 20px;
      &:nth-of-type(1) {
        padding-left: 30px;
      }
      i {
        display: inline-block;
        vertical-align: bottom;
        width: 0px;
        height: 14px;
        border: 1px solid #dbdbdb;
        margin: 0 20px;
      }
    }
  }
  .btn {
    position: absolute;
    top: 26px;
    right: 24px;
    width: 136px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #009588 !important;
    border-radius: 21px;
    font-size: 14px;
    color: #009588 !important;
    text-align: center;
    background: #e4ebf1;
    padding: 0;
  }
  .btn:hover {
    background: rgba(0, 149, 136, 0.1) !important;
  }
  .dateShow {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 240px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #009588;
    text-align: center;
    padding: 0;
  }
}

.mainCon {
  top: 230px;
  padding: 0 24px;
}
.infoLeft {
  padding-top: 24px;
  padding-bottom: 24px;
  padding-right: 24px;
  border-right: 10px solid #f5f7fa;
  .title {
    font: bold 18px Microsoft YaHei;
    color: #333333;
  }
}
.infoRight {
  padding-top: 24px;
  padding-left: 24px;
  position: relative;
  &::before {
    content: '';
    width: 10px;
    background-color: #f5f7fa;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
  }
}
.info {
  background-color: #fff;
  height: calc(100%);
  &TopTip {
    margin-top: 15px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    background-color: #fffbe6;
    color: red;
    font-size: 14px;
    position: relative;
    &::before {
      width: 24px;
      height: 30px;
      content: '';
      background-color: #fffbe6;
      position: absolute;
      top: 0;
      left: -24px;
    }
    &::after {
      width: 24px;
      height: 30px;
      content: '';
      background-color: #fffbe6;
      position: absolute;
      top: 0;
      right: -24px;
    }
    .el-icon-warning {
      vertical-align: middle;
    }
  }
  &Title {
    height: 35px;
    line-height: 35px;
    margin-top: 20px;
    position: relative;
    .edit {
      position: absolute;
      right: 15px;
      top: 0px;
      height: 20px;
    }
    .text {
      color: #333;
      line-height: 20px;
      height: 20px;
      border-left: 4px solid #009588;
      padding-left: 15px;
      font: bold 16px Microsoft YaHei;
    }
  }
  &List {
    padding: 5px 0;
    &Item {
      padding-left: 15px;
      line-height: 30px;
      font-size: 14px;
      color: #333;

      /deep/.el-link {
        height: 30px;
        vertical-align: top;
        &--inner {
          height: 26px !important;
          line-height: 26px;
        }
      }

      &Null {
        color: #d81e06;
      }
    }
    // 修改步骤条样式
    /deep/ .el-steps {
      .el-step__icon.is-text {
        border: none;
        background-color: #eee;
        border-radius: 50%;
        width: 10px;
        height: 10px;
      }
      .el-step__icon-inner {
        display: none;
      }
      .el-step__line {
        background-color: #eee;
        left: 4px !important;
        top: 9px !important;
        bottom: -8px !important;
      }
      .el-step__title {
        font-size: 12px;
        color: #999;
      }
      .el-step__description {
        margin-bottom: 15px;
        font-size: 14px;
        color: #444;
      }
    }
    .infoListTitles {
      font-size: 14px;
      color: #999;
    }
    .infoListInput {
      margin: 15px 0;
      // height: 100px;
    }
  }
}
.noDataTip {
  line-height: 26px;
  font-size: 14px;
  color: #666;
}
</style>
